<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="box">id</div>
    <div class="box">class</div>
    <p>ppppp</p>
    <p>ppppp</p>
    <p>ppppp</p>
  </body>
  <script>
    //需求：封装获取DOM
    var $ = {
      id: function (id) {
        return document.getElementById(id);
      },
      cls: function (className) {
        return document.getElementsByClassName(className);
      },
      tag: function (tagName) {
        return document.getElementsByTagName(tagName);
      },
    };

    $.id("box").innerHTML = "这是id";
    $.cls("box")[0].style.color = "aqua";
    $.tag("p")[1].style = "color :pink;border:1px solid #eee;padding:5px";
  </script>
</html>
